---
import Show from '../../components/Show.astro';
import Layout from '../../layouts/Layout.astro';
import fetchAPI from '../../lib/api';
import type { IUser } from '../../types.js';

const { id } = Astro.params as { id: string };

const user = (await fetchAPI(`user/${id}`)) as IUser;
---

<Layout>
	<main>
		<Show when={user}>
			<Show when={!user.error}>
				<h1 slot="fallback">User not found.</h1>
				<h1>User : {user.id}</h1>
				<ul class="meta">
					<li>
						<span class="label">Created:</span>
						{user.created}
					</li>
					<li>
						<span class="label">Karma:</span>
						{user.karma}
					</li>
					<Show when={user.about}>
						<li set:html={user.about} class="about" />{' '}
					</Show>
				</ul>
				<p>
					<a href={`https://news.ycombinator.com/submitted?id=${user.id}`}>submissions</a> |{' '}
					<a href={`https://news.ycombinator.com/threads?id=${user.id}`}>comments</a>
				</p>
			</Show>
		</Show>
	</main>
</Layout>

<style>
	main {
		background-color: rgb(248 250 252);
		box-sizing: border-box;
		padding: 2em 3em;
	}

	h1 {
		margin: 0;
		font-size: 1.5em;
	}

	.meta {
		list-style-type: none;
		padding: 0;
	}

	.label {
		display: inline-block;
		min-width: 4em;
	}

	.about {
		margin: 1em 0;
	}

	p a {
		text-decoration: underline;
	}
</style>